<template>
  <p>混合式API写法</p>
  <p>ref</p>
  <p>count: {{ count }}</p>
  <p>test: {{ test }}</p>

  <p>reactive==========</p>
  <p>obj:{{ obj }}</p>
  <p>obj.name:{{ obj.name }}</p>
  <p>obj.age:{{ obj.age }}</p>
  <p>arr:{{ arr }}</p>
  <p>arr[0]:{{ arr[0] }}</p>
  <p>arr[1]:{{ arr[1] }}</p>

  <p>computed==========</p>
  <p>countAddFive:{{ countAddFive }}</p>
  <p>objAgeAddFive:{{ objAgeAddFive }}</p>

  <p>methods</p>
  <button @click="countAddOne">count + 1</button>
  <button @click="countAddTwo">count + 2</button>
  <button @click="updateObj">更新obj</button>

  <p>watch</p>
  <p>count: {{ count }}</p>

  <p>组件</p>
  <Son :foo="obj.name" :age="obj.age" />
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import Son from './Son.vue'

const count = ref(0)
const test = ref('hello world')

// reactive
const obj = reactive({
  name: 'tom',
  age: 12
})

const arr = reactive([1, 2, 3, 4])

// computed
const countAddFive = computed(() => {
  return count.value + 5
})
const objAgeAddFive = computed(() => {
  return obj.age + 5
})



// methods
function countAddOne() {
  count.value++
}
const countAddTwo = () => {
  count.value += 2
}

const updateObj = () => {
  updateObjName()
}
const updateObjName = () => {
  obj.name = 'jerry'
}


// watch
watch(count, (newVal, oldVal) => {
  console.log('count改变了');
  console.log('newVal', newVal);
  console.log('oldVal', oldVal);
})

watch(countAddFive, (newVal, oldVal) => {
  console.log('countAddFive改变了');
  console.log('newVal', newVal);
  console.log('oldVal', oldVal);
})

watch(obj, (newVal, oldVal) => {
  console.log('obj改变了');
  console.log('newVal', newVal);
  console.log('oldVal', oldVal);
})

watch(() => obj.name, (newVal, oldVal) => {
  console.log('obj.name改变了');
  console.log('newVal', newVal);
  console.log('oldVal', oldVal);
})


</script>